<%- include('layout/header', { title: 'Nossas Lojas' }) %>

<main class="lojas">

<div class="topo-fixo z-depth-1">
    <div class="valign-wrapper amber darken-2 white-text">
		<div>
			<a href="index.html"><i class="material-icons waves-effect waves-light waves-circle">arrow_back</i></a>
		</div>

        <h5 class="titulo">Lojas</h5>

        <div>
            <i class="material-icons waves-effect waves-light
                      waves-circle dropdown-button"
                data-activates="submenu" data-gutter="5"
                data-constrainwidth="false">
                    more_vert
            </i>

            <ul id="submenu" class="dropdown-content">
            	<li><a class="black-text" href="pagar-estacionamento.html">Pagar</a></li>
            	<li><a class="black-text" href="index.html">Entrada</a></li>
            </ul>
        </div>
    </div>

    <ul class="tabs amber darken-2">
		<%
			dados.lojasPorCategoria
		     .forEach(function(categoria){
		     	%>
			        <li class="tab">
			            <a href="#<%= categoria.id %>"
			               class="white-text waves-effect waves-light">
			                <%= categoria.nome %>
			            </a>
			        </li>
				<%
		     });
		%>
		<div class="indicator"></div>
    </ul>
</div>

<%
	dados.lojasPorCategoria
     .forEach(function(categoria){ 
     	%>
		<div id="<%= categoria.id %>" class="section">
		<%
		var anterior = {nome:' '};

		categoria.lojas
		     .forEach(function(loja){ 

		    if (loja.nome.charAt(0) !== anterior.nome.charAt(0)) {
				if (anterior.nome !== ' ') {
			     	%>
						</div>
			     	<%
			    }

		     	%>
					<h6 class="container blue-grey-text"><%= loja.nome.charAt(0) %></h6>
					<div class="collection">
		     	<%
		    }
			%>
				<a class="collection-item waves-effect black-text" 
				   href="<%= loja.url %>"><%= loja.nome %></a>
			<% 
			anterior = loja;
		});
		%>
		</div>
	</div>
	<%
	});
%>

</main>

<%- include('layout/footer') %>
